﻿<div>
    <Divider Orientation="DividerOrientation.Left">Align Top</Divider>
    <GridRow Justify="RowJustify.Center" Align="RowAlign.Top">
        <GridCol Span="4">
            @DemoBox((100, "col-4"))
        </GridCol>
        <GridCol Span="4">
            @DemoBox((50, "col-4"))
        </GridCol>
        <GridCol Span="4">
            @DemoBox((120, "col-4"))
        </GridCol>
        <GridCol Span="4">
            @DemoBox((80, "col-4"))
        </GridCol>
    </GridRow>

    <Divider Orientation="DividerOrientation.Left">Align Middle</Divider>
    <GridRow Justify="RowJustify.SpaceAround" Align="RowAlign.Middle">
        <GridCol Span="4">
            @DemoBox((100, "col-4"))
        </GridCol>
        <GridCol Span="4">
            @DemoBox((50, "col-4"))
        </GridCol>
        <GridCol Span="4">
            @DemoBox((120, "col-4"))
        </GridCol>
        <GridCol Span="4">
            @DemoBox((80, "col-4"))
        </GridCol>
    </GridRow>

    <Divider Orientation="DividerOrientation.Left">Align Bottom</Divider>
    <GridRow Justify="RowJustify.SpaceBetween" Align="RowAlign.Bottom">
        <GridCol Span="4">
            @DemoBox((100, "col-4"))
        </GridCol>
        <GridCol Span="4">
            @DemoBox((50, "col-4"))
        </GridCol>
        <GridCol Span="4">
            @DemoBox((120, "col-4"))
        </GridCol>
        <GridCol Span="4">
            @DemoBox((80, "col-4"))
        </GridCol>
    </GridRow>
</div>

<style>
    #components-grid-demo-flex-align [class~='ant-row'] {
        background: rgba(128, 128, 128, 0.08);
    }
</style>

@code{
    RenderFragment<(int value, string children)> DemoBox = props =>@<p class="@($"height-{props.value}")">@props.children</p>;
}
